<template>
    <div>
        <van-tabs v-model="active" animated swipeable>
            <van-tab v-for="(item, index) in tabList" :key="index">
                <template #title>
                    <div class="title">{{ item.title }}<span v-if="isAllRead(index)"></span></div>
                </template>
                <div class="content" :ref="'content' + index" @scroll="showMore(index, 'content' + index)">
                    <van-empty
                        class="custom-image"
                        :image="require('../../assets/images/logistics/no_news.png')"
                        description="暂无消息"
                        v-if="!item.list.length"
                    />
                    <van-cell
                        center
                        :value="items.createTime"
                        is-link
                        :to="'/newscenter/newsdetail/' + items.id"
                        v-for="(items, indexs) in item.list"
                        :key="indexs"
                    >
                        <template #title>
                            <div class="title-box">
                                <div class="icon">
                                    <span class="if-read" v-if="items.isReader"></span>
                                    <img
                                        v-if="items.type === 1"
                                        :src="require('../../assets/images/newscenter/系统消息.png')"
                                    />
                                    <img v-else :src="require('../../assets/images/newscenter/个人信息.png')" />
                                </div>
                                <div class="news-info">
                                    <div class="top">
                                        {{ items.type === 1 ? '系统消息' : '个人消息' }}
                                        <img v-if="items.top" src="../../assets/images/newscenter/置顶.png" alt="" />
                                    </div>
                                    <div class="btm">发布人：{{ items.sourceName }}</div>
                                </div>
                            </div>
                        </template>
                    </van-cell>
                </div>
            </van-tab>
        </van-tabs>
        <router-view class="detail"></router-view>
    </div>
</template>

<script>
import { MessageApi } from '@/request/api';

export default {
    data() {
        return {
            active: 0,
            tabList: [
                {
                    title: '全部消息',
                    list: [],
                    currentPage: 1,
                    pages: null,
                },
                {
                    title: '系统消息',
                    list: [],
                    currentPage: 1,
                    pages: null,
                },
                {
                    title: '个人消息',
                    list: [],
                    currentPage: 1,
                    pages: null,
                },
            ],
        };
    },
    created() {
        this.tabList.forEach((el, i) => {
            this.getMessage(i + '', '', (res) => {
                el.list = res.data.records;
                el.pages = res.data.pages;
            });
        });
    },
    methods: {
        getMessage(type, currentPage, callbackFn) {
            MessageApi({
                current: currentPage.length ? currentPage : '1',
                size: '20',
                type,
            }).then((res) => {
                callbackFn(res);
            });
        },
        showMore(index, contentName) {
            if (
                this.$refs[contentName][0].scrollTop >=
                    this.$refs[contentName][0].scrollHeight - this.$refs[contentName][0].offsetHeight - 1 &&
                this.tabList[index].pages > this.tabList[index].currentPage
            ) {
                this.getMessage(index, (++this.tabList[index].currentPage).toString(), (res) => {
                    res.data.records.forEach((el) => {
                        this.tabList[index].list.push(el);
                    });
                });
            }
        },
    },
    computed: {
        isAllRead() {
            return function(index) {
                return this.tabList[index].list.filter((el) => el.isReader).length;
            };
        },
    },
    watch: {
        $route(newPath) {
            if (newPath.path === '/newscenter') {
                this.tabList.forEach((el, i) => {
                    this.getMessage(i + '', (el.currentPage = 1), (res) => {
                        el.list = res.data.records;
                    });
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
.van-tabs {
    /deep/.van-tabs__wrap {
        border-top: 0.01rem solid #e5e5e5;
        border-bottom: 0.01rem solid #e5e5e5;
        height: 0.9rem;
        box-sizing: border-box;
        margin-bottom: 0.1rem;
    }
    /deep/.van-tab.van-tab--active {
        color: #003399;
    }
    /deep/.van-tabs__line {
        width: 1.05rem;
        height: 0.04rem;
        background-color: #ffcc33;
    }
    .content {
        width: 100%;
        height: calc(100vh - 1.62rem);
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
    }
}
.van-cell {
    color: #333;
    .title-box {
        display: flex;
        align-items: center;
        .icon {
            position: relative;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            margin-right: 0.32rem;
            img {
                width: 100%;
                height: 100%;
            }
            span {
                position: absolute;
                right: 0;
                width: 0.16rem;
                height: 0.16rem;
                background: url('../../assets/images/newscenter/红点.png') no-repeat center;
                background-size: contain;
            }
        }
        .news-info {
            img {
                height: 0.2rem;
                margin-left: 0.12rem;
            }
            .btm {
                color: #999;
            }
        }
    }
}
.title {
    span {
        position: absolute;
        right: 0.4rem;
        width: 0.16rem;
        height: 0.16rem;
        background: url('../../assets/images/newscenter/红点.png') no-repeat center;
        background-size: contain;
    }
}
.detail {
    position: fixed;
    left: 0;
    top: 0.72rem;
    width: 100%;
    height: calc(100vh - 0.72rem);
    background-color: #efefef;
    z-index: 1000;
}
</style>
